<style lang="scss" scoped>
  .processing{
    margin-top: 1.719vw;
    position: relative;
    .title{
      font-size: 0.833vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #00D1E3;
      opacity: 1;
      margin-bottom: 0.937vw;
      line-height: 1.145vw;
    }
    .bord{
      position: absolute;
      top: 3.125vw;
      right: 1.04vw;
      z-index: 10;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .li{
        height: 1.04vw;
        font-size: 0.729vw;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 1.04vw;
        color: #E3E3E3;
        opacity: 1;
        margin-right: 1.875vw;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .li:first-child{
        .line{
          width: 1.25vw;
          height: 0.677vw;
          background: #138CF8;
          opacity: 1;
          margin-right: 0.52vw;
        }
      }
      .li:last-child{
        .line{
          width: 1.25vw;
          height: 0.677vw;
          background: #B3B425;
          opacity: 1;
          margin-right: 0.52vw;
        }
      }
    }

}
</style>
<template>
    <div class="processing bot_s">
      <div class="title">处理数据</div>
      <div class="bord">
        <div class="li">
          <span class="line"></span>
          出料
        </div>
        <div class="li">
          <span class="line"></span>
          入料
        </div>
      </div>
      <Linechartstrans :commonEchartsObj="countDeliverRecord"></Linechartstrans>
    </div>

</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import {countFeedingDischargeWeightByDay
} from "@/api/screem";
import Linechartstrans from './linechartstrans.vue'
export default {
  data() {
    return {
      initTimer: null,
      countDeliverRecord: {
        echarts_name: `lines1`,
        line_list: [],
        line_date: [],
      },
    };
  },
  created() {
    this.init()
   //this.pullInit()
  },
  props: [],
  components: {Linechartstrans},
  methods: {
    pullInit() {
      this.init()
      this.initTimer = setInterval(() => {
        this.init()
      }, 60000)
    },
    init() {

      countFeedingDischargeWeightByDay()
        .then(res => {
          let arr1 = [], arr2 = [];
          this.countDeliverRecord.line_date = [];
          (res.data[0] || []).forEach(item => {
            this.countDeliverRecord.line_date.push(moment(item.deliverDate).format('MM-DD'))
            arr2.push(item.weightOfKG)

          });
          (res.data[1] || []).forEach(item => {
            arr1.push(item.weightOfKG)

          });
          var series = [
            {
              name: '入料',
              type: 'line',
              showSymbol: true,
              symbol: 'none',
//                smooth:true,
              symbolSize: 6,
              colorClass: '#B3B425',
              lineStyle: {
                width: 0.5,
                color: '#B3B425'
              },
              itemStyle: {
                color: '#B3B425',
                borderWidth: 1,
                borderColor: '#B3B425',
                shadowBlur: 12,
                shadowColor: '#B3B425',
                opacity:0.1,
                normal: {
                  color: "#000",
                  lineStyle: {
                    color: "#B3B425",
                    width:1
                  },
                  borderWidth: 1,
                  borderColor: '#B3B425',
                }
              },
              data: arr1
            },
            {
              name: '出料',
              type: 'line',
              showSymbol: true,
              symbol: 'none',
//                smooth:true,
              symbolSize: 6,
              colorClass: '#40A0FC',
              lineStyle: {
                width: 0.5,
                color: '#40A0FC'
              },
              itemStyle: {
//                  color: '#40A0FC',
                borderWidth: 1,
                borderColor: '#40A0FC',
                shadowBlur: 12,
                shadowColor: '#40A0FC',
                opacity:0,
                normal: {
                  color: "#000",
                  lineStyle: {
                    color: "#40A0FC",
                    width:1
                  },
                  borderWidth: 1,
                  borderColor: '#40A0FC',
                }
              },
              data: arr2
            },
          ];
          this.$set(this.countDeliverRecord, 'line_list', series);
        })

    }
  }
};
</script>


